import * as Cesium from "cesium";
// import { useCesiumStore } from "@/stores/useCesiumStore.js";
// import { toRaw } from "vue";

export const MeasureDistance = (viewer) => {
  //   const viewer = toRaw(useCesiumStore().viewer); //获取viewer对象
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //创建屏幕空间事件处理器
  viewer.scene.canvas.style.cursor = "crosshair";

  //计算空间距离函数
  const getSpaceDistance = (position) => {
    let distance = 0;
    for (let i = 0; i < position.length - 1; i++) {
      distance += Cesium.Cartesian3.distance(position[i], position[i + 1]); //计算两点之间的距离
    }
    return distance.toFixed(2); //保留两位小数
  };

  let positions = []; //记录鼠标点击的位置
  let activeShapePoints = []; //记录鼠标点击的位置
  let activeShape = null; //动态图形
  let floatingPoint = null; //第一个点，判断是否开始获取鼠标移动位置并添加至activeShapePoints

  //绘制点与标签
  const drawPoint = (position, textDitance) => {
    const pointGeometry = viewer.entities.add({
      name: "distancePoint",
      position: position,
      point: {
        color: Cesium.Color.SKYBLUE,
        pixelSize: 6,
        outlineColor: Cesium.Color.RED,
        outlineWidth: 2,
        disableDepthTestDistance: 4000,
      },
      label: {
        text: textDitance + "米",
        font: "18px sans-serif",
        fillColor: Cesium.Color.GOLD,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2, //外边框宽度
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向居下
        pixelOffset: new Cesium.Cartesian2(20, -20), //偏移量
        heightReference: Cesium.HeightReference.NONE, //高度参考
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    });
    return pointGeometry;
  };

  //绘制图形
  const drawShape = (positionData) => {
    const shape = viewer.entities.add({
      name: "distanceShape",
      polyline: {
        positions: positionData,
        width: 5,
        material: new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.RED,
        }),
        //贴地
        // clampToGround: true,
        // disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    });
    return shape;
  };

  //鼠标左键单击事件
  handler.setInputAction((event) => {
    const earthPosition = viewer.scene.pickPosition(event.position); //获取点击位置的经纬度坐标
    //如果鼠标指针不在地球上，则earthPosition为undefined
    if (Cesium.defined(earthPosition)) {
      //计算距离
      positions.push(earthPosition); //记录点击位置
      let disance = getSpaceDistance(positions); //计算距离
      if (activeShapePoints.length === 0) {
        activeShapePoints.push(earthPosition); //记录第一个点
        const dynamicPosition = new Cesium.CallbackProperty(() => {
          return activeShapePoints;
        }, false); //动态位置
        activeShape = drawShape(dynamicPosition); //绘制动态图形
      }
      //添加当前点到activeShapePoints，实时渲染动态图
      activeShapePoints.push(earthPosition);
      floatingPoint = drawPoint(earthPosition, disance); //绘制点与标签
    } else {
      window.alert("请点击地球上的位置");
      return;
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  //鼠标移动事件
  handler.setInputAction((event) => {
    if (Cesium.defined(floatingPoint)) {
      let newPosition = viewer.scene.pickPosition(event.endPosition); //获取鼠标移动位置的经纬度坐标
      if (Cesium.defined(newPosition)) {
        activeShapePoints.pop(); //删除最后一个点
        activeShapePoints.push(newPosition); //添加新的点
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  //鼠标右键单击事件
  handler.setInputAction(() => {
    activeShapePoints.pop(); //删除最后一个点
    if (activeShapePoints.length) {
      drawShape(activeShapePoints); //绘制最终图形
    }
    viewer.entities.remove(activeShape); //去除动态图形
    floatingPoint = undefined;
    activeShape = undefined;
    activeShapePoints = [];
    positions = [];
    viewer.scene.canvas.style.cursor = "default";
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};
